<template>
	<view class="container">
		<!-- 1. 自定义顶部导航栏 -->
		<view class="custom-navbar">
			<view class="back-arrow" @click="goBack">
				<uni-icons type="left" size="22" color="#333"></uni-icons>
			</view>
			<view class="navbar-title">消息</view>
            <!-- 右侧可以留空或添加其他按钮，例如 "清空未读" -->
            <view class="navbar-placeholder"></view>
		</view>

		<!-- 2. 消息列表 -->
		<scroll-view class="message-list" scroll-y="true">
			<view
                class="message-item"
                v-for="(message, index) in messageList"
                :key="index"
                @click="gotoChat(message)"
            >
				<view class="avatar-wrapper">
					<image class="avatar" :src="message.avatarUrl" mode="aspectFill"></image>
                    <!-- 未读消息红点提示 -->
					<view class="unread-badge" v-if="message.isUnread"></view>
				</view>
				<view class="message-details">
					<text class="sender-name">{{ message.senderName }}</text>
					<text class="message-content">{{ message.content }}</text>
				</view>
				<text class="timestamp">{{ message.timestamp }}</text>
			</view>

            <!-- 空状态或列表底部提示 -->
            <view v-if="messageList.length === 0" class="empty-state">
                <text>暂无消息</text>
            </view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 模拟消息列表数据
				messageList: [
					{
						id: 1,
						avatarUrl: '/static/logo.png', // 替换为实际头像路径或网络URL
						senderName: '系统通知',
						content: '欢迎使用AI直播App！',
						timestamp: '昨天',
						isUnread: true,
					},
					{
						id: 2,
						avatarUrl: '/static/logo.png', // 替换为实际头像路径或网络URL
						senderName: '张老师',
						content: '您的课程《零基础学编程》已开课',
						timestamp: '10:35',
						isUnread: true,
					},
                    {
						id: 3,
						avatarUrl: '/static/logo.png', // 替换为实际头像路径或网络URL
						senderName: '前端小王子',
						content: '好的，没问题！',
						timestamp: '09:12',
						isUnread: false,
					},
                    {
						id: 4,
						avatarUrl: '/static/logo.png', // 替换为实际头像路径或网络URL
						senderName: '活动助手',
						content: '[优惠券] 您有一张新的优惠券待查收',
						timestamp: '星期一',
						isUnread: false,
					},
                    // ... 更多消息
				]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
            gotoChat(message) {
                console.log('跳转到与 ' + message.senderName + ' 的聊天界面');
                // 实际跳转逻辑
                // uni.navigateTo({ url: '/pages/chat/chat?id=' + message.id });
                // 可以将消息标记为已读
                // message.isUnread = false; // 这只是前端模拟，实际应通知后端
            }
		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f9fa; /* 更柔和的背景色 */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px; /* 标准导航栏高度 */
		padding-top: var(--status-bar-height); /* 适配状态栏高度 */
		padding-left: 15px;
		padding-right: 15px;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04); /* 轻微阴影增加层次感 */
		box-sizing: content-box; /* 让 padding 不影响 height */
		position: relative;
		z-index: 10; /* 确保阴影在内容上方 */

		.back-arrow {
			width: 40px; /* 增大点击区域 */
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			opacity: 0.85; /* 降低不必要元素的视觉权重 */
		}

		.navbar-title {
			font-size: 18px; /* 稍微增大字号 */
			font-weight: 600; /* 使用600而非bold，更现代 */
			color: #323232; /* 稍微柔和的黑色 */
			letter-spacing: 0.5px; /* 增加字符间距提升可读性 */
		}

		.navbar-placeholder {
			width: 40px; /* 与返回箭头宽度一致，保持标题居中 */
		}
	}

	.message-list {
		flex: 1; /* 占据剩余空间 */
		overflow-y: auto; /* 允许垂直滚动 */
		padding: 10rpx 0; /* 顶部底部添加内边距 */
		border-radius: 24rpx 24rpx 0 0; /* 顶部圆角 */
		background-color: #fff; /* 列表区域背景白色 */
		margin-top: -15rpx; /* 轻微负边距，创造重叠效果 */
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.02); /* 顶部微妙阴影 */
	}

	.message-item {
		display: flex;
		align-items: center;
		padding: 28rpx 30rpx;
		margin: 0 16rpx;
		border-radius: 16rpx; /* 给每个item添加圆角 */
		transition: all 0.2s ease;
		position: relative;
		
		/* 使用伪元素添加底部分隔线，避免与圆角冲突 */
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 16rpx;
			right: 16rpx;
			height: 1rpx;
			background-color: #f0f0f5; /* 更柔和的分隔线颜色 */
		}
		
		/* 最后一项不显示分隔线 */
		&:last-child::after {
			display: none;
		}

		&:active {
			background-color: #f9f9fc; /* 点击反馈更柔和 */
			transform: scale(0.99); /* 轻微的缩放效果 */
		}

		.avatar-wrapper {
			position: relative;
			margin-right: 25rpx;

			.avatar {
				width: 90rpx;
				height: 90rpx;
				border-radius: 16rpx; /* 增加圆角感 */
				background-color: #eef1f6; /* 图片加载前占位色更协调 */
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05); /* 轻微阴影 */
			}

			.unread-badge {
				position: absolute;
				top: -6rpx;
				right: -6rpx;
				width: 16rpx;
				height: 16rpx;
				background-color: #5d7fe6; /* 更现代的蓝紫色调 */
				border-radius: 50%;
				border: 2rpx solid #fff; /* 白边框 */
				box-shadow: 0 1rpx 4rpx rgba(93, 127, 230, 0.3); /* 带有光晕效果 */
			}
		}

		.message-details {
			flex: 1; /* 占据中间主要空间 */
			display: flex;
			flex-direction: column;
			justify-content: center; /* 垂直居中 */
			min-width: 0; /* 防止内容过长撑开布局 */

			.sender-name {
				font-size: 30rpx;
				color: #323232; /* 更协调的深色 */
				margin-bottom: 10rpx; /* 增加间距 */
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 500; /* 介于normal和bold之间 */
			}

			.message-content {
				font-size: 26rpx;
				color: #7d7d8e; /* 更柔和的灰色 */
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				line-height: 1.3; /* 稍微增加行高 */
			}
		}

		.timestamp {
			font-size: 24rpx;
			color: #9fa3b0; /* 更柔和的浅色 */
			margin-left: 20rpx;
			align-self: flex-start; /* 时间戳顶部对齐 */
			padding-top: 6rpx; /* 微调对齐 */
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 400rpx; /* 增加高度感 */
		color: #9fa3b0; /* 柔和的浅色 */
		font-size: 28rpx;
		
		&::before {
			content: '';
			width: 100rpx;
			height: 100rpx;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239fa3b0"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>');
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			margin-bottom: 20rpx;
			opacity: 0.5;
		}
	}

	/* 隐藏滚动条 */
	.message-list ::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}
	
	/* 消息类型样式 - 根据消息类型定制样式 */
	.message-item {
		/* 系统通知 */
		&:nth-child(1) {
			.avatar {
				background-color: #ebf5ff; /* 浅蓝色底 */
			}
			.sender-name {
				color: #5d7fe6; /* 蓝紫色调 */
			}
		}
		
		/* 课程通知 */
		&:nth-child(2) {
			.avatar {
				background-color: #f0f5eb; /* 浅绿色底 */
			}
		}
		
		/* 优惠券通知 */
		&:nth-child(4) {
			.message-content {
				color: #ff6b6b; /* 强调特殊消息 */
			}
		}
	}
</style> 